<template>
    <div>
        <div class="c_real_name_aut">
        <ul>
            <li><el-button type="success" plain @click="handleAddClick" class="c_real_name_aut">上传</el-button></li>
            <li>      
            <template slot="header" slot-scope="">
                <el-input
                v-model="search"
                size="mini"
                placeholder="输入关键字搜索"/>
            </template>
        </li>
        </ul>
        </div>
        <el-table :data="tableData" border style="margin: 0 auto">
                <el-table-column prop="number" label="序号" width="60"></el-table-column>
                <el-table-column prop="c_name" label="公司证件名称" width="200"></el-table-column>
                <el-table-column prop="Certificate_description" label="证件描述" width="200"></el-table-column>
                <el-table-column prop="Certificate_picture" label="证件图片" width="400"></el-table-column>
            <el-table-column label="操作" width="180">
                <template slot-scope="scope">
                    <el-button type="primary" @click="handleEditClick(scope.$index,scope.row)"  size="mini">编辑</el-button>
                    <el-button type="danger" size="mini" @click="handleDelClick(scope.$index,scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog title="修改信息" :visible.sync="editBox" width="50%" :before-close="handleClose">
            <el-form ref="form" label-width="100px" v-model="user">
            
                <el-form-item label="序号:">
                    <el-input  maxlength="50" v-model = "user.number" ></el-input>
                </el-form-item>
                <el-form-item label="公司证件名称:">
                    <el-input  maxlength="50" v-model = "user.c_name" ></el-input>
                </el-form-item>
                <el-form-item label="证件描述:">
                    <el-input  maxlength="50" v-model = "user.Certificate_description"></el-input>
                </el-form-item>
                <el-form-item label="证件图片:">
                    <el-input p maxlength="50" v-model = "Certificate_picture" ></el-input>
                    <el-upload
                        class="upload-demo"
                        action="https://jsonplaceholder.typicode.com/posts/"
                        :on-preview="handlePreview"
                        :on-remove="handleRemove"
                        :before-remove="beforeRemove"
                        multiple
                        :limit="3"
                        :on-exceed="handleExceed"
                        :file-list="fileList">
                        <el-button size="small" type="primary">点击上传</el-button>
                    </el-upload>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="handleEditUser">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog title="增加子账号" :visible.sync="addBox" width="50%" :before-close="handleClose">
            <el-form ref="form" label-width="100px" v-model="addUserData">
                <el-form-item label="公司证件名称:">
                    <el-input  maxlength="50" v-model = "addUserData.c_name" ></el-input>
                </el-form-item>
                <el-form-item label="证件描述:">
                    <el-input  maxlength="50" v-model = "addUserData.Certificate_description" ></el-input>
                </el-form-item>
                <el-form-item label="证件图片:">
                    <el-input  maxlength="50" v-model = "Certificate_picture"></el-input>
                    <el-upload
                        class="upload-demo"
                        action="https://jsonplaceholder.typicode.com/posts/"
                        :on-preview="handlePreview"
                        :on-remove="handleRemove"
                        :before-remove="beforeRemove"
                        multiple
                        :limit="3"
                        :on-exceed="handleExceed"
                        :file-list="fileList">
                        <el-button size="small" type="primary">点击上传</el-button>
                    </el-upload>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="handleAddUser">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
    export default {
        name: "c_real_name_aut",
        data() {
            return {
                tableData: [{
                    number: '1',
                    role:"操作员",
                    

                }, {
                    number: '2',
                   
                }, {
                    number: '3',
                    
                    
                }, {
                    number: '4',
                    
                }, {
                    number: '5',
                    
                }],
                addBox : false,
                editBox:false,
                user:{},
                editIndex:"",
                addUserData:{
                    number: '',
                    state: '',
                    account: '',
                    Department:'',
                    adress:'',
                    city:'',
                    date_issue:'',
                    date_refresh:'',
                    date_end:'',
                    sort:'',
                },
                search: ''
            }
        },
        methods:{
            handleEditClick(index,row){
                this.editBox = true
                this.user = row
                this.editIndex = index
            },

            // eslint-disable-next-line no-unused-vars
            handleDelClick(index,row){
                this.$confirm('此操作将删除该用户, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.tableData.splice(index,1)
                    this.$message({showClose: true, message: "删除成功", type: 'success'});
                })
            },
            handleClose(done) {
                done();
            },
            handleEditUser(){
                this.tableData.splice(this.editIndex,1,this.user)
                this.$message({showClose: true, message: "修改成功", type: 'success'});
                this.editBox = false
            },
            handleAddClick(){
                this.addBox = true
            },
            handleAddUser(){
                // let strDate = dateFormat("YYYY-mm-dd",this.addUserData.date)
                // this.addUserData.date = strDate
                this.tableData.push(this.addUserData)
                this.addBox = false
                this.addUserData = {}
                this.$message({showClose: true, message: "添加成功", type: 'success'});
            },
            fabu(){
                alert('上传成功')
            },
        }
    }


</script>

<style scoped>
.c_real_name_aut{
    margin: 0 auto;
}
.c_real_name_aut ul>li{
    list-style-type: none;
    float: left;
    margin: 10px 10px 10px 70px;
}
</style>